<template>
	<div class="app-container">
		<el-form class="filter-container" ref="searchForm" :inline="true" :model="searchForm">
			<el-form-item>
				<el-button icon="el-icon-plus" type="success" @click="handleAppend()">添加</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="dataTable.slice((pagination.currentPage-1)*pagination.pagesize, pagination.currentPage*pagination.pagesize)"
               ref="table" :max-height="tableHeight" stripe highlight-current-row border v-loading="listLoading">
			<el-table-column prop="userId" label="账号"></el-table-column>
			<el-table-column prop="userName" label="名称"></el-table-column>
			<el-table-column prop="isAdmin" label="角色" align="center" width="100">
                <template slot-scope="scope">
                    <span>{{scope.row.isAdmin? "管理员": "普通"}}</span>
                </template>
            </el-table-column>
			<el-table-column prop="usable" label="状态" align="center" width="100">
				<template slot-scope="scope">
					<el-tag v-for="item in usableOptions" v-if="item.value==scope.row.usable"
						:key="item.value" :type="item.type" size="mini">{{item.name}}</el-tag>
				</template>
			</el-table-column>
            <el-table-column prop="createdDate" label="创建时间" width="180">
                <template slot-scope="scope">
                	{{scope.row.createdDate | dateFormat }}
                </template>
            </el-table-column>
			<el-table-column label="操作" align="center" width="160" >
				<template slot-scope="scope">
                    <el-link icon="el-icon-lock" type="warning" :underline="false" @click="handleSecret(scope.$index,scope.row)">密码</el-link>
					<el-link icon="el-icon-edit" type="primary" :underline="false" @click="handleModify(scope.$index,scope.row)">修改</el-link>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
		  @current-change="handleCurrentChange"
		  :current-page="pagination.currentPage"
		  :page-size="pagination.pagesize"
		  :total="pagination.total"
		  background
		  layout="total, prev, pager, next">
		</el-pagination>
		<!--信息维护Form-->
		<InfoEditForm :infoDialog="infoDialog" @update="handleSearch('searchForm')"></InfoEditForm>
        <SecretForm :secretDialog="secretDialog"></SecretForm>

	</div>
</template>


<script>
	import InfoEditForm from "./InfoEditForm";
	import SecretForm from "./SecretForm";

	export default {
		data() {
			return {
				listLoading: false,
				tableHeight: 0,
				searchForm: {
					clientType: -1
				},
				infoDialog: {
					info: {}
				},
                secretDialog: {
                    info: {}
                },
				pagination: {
					total: 0,
					pagesize: 30,
					currentPage: 1,
				},
				dataTable: [],
				usableOptions: [{
					value: true,
					name: "已启用",
					type: "success"
					},{
					value: false,
					name: "已禁用",
					type: "info"
				}]
			};
		},
		methods: {
			handleCurrentChange(page) {
				this.pagination.currentPage = page;
			},
			handleSearch(form) {
				this.$refs[form].validate(valid => {
					if (!valid) {
						return;
					}
					this.listLoading = true;
					this.$http.fetch(this.api.userList)
						.then(data => {
							if (data) {
							    this.pagination.total = data.length;
							    this.dataTable = data;
							}
							this.listLoading = false;
						});
				});
			},
			handleAppend() {
				this.infoDialog = {
					title: '添加账号',
					visible: true,
					option: 0,
					rowIndex: null,
					info: { usable: true, isAdmin: false }
				};
			},
			handleModify(index, row) {
				this.infoDialog = {
					title: '修改账号',
					visible: true,
					option: 1,
					rowIndex: index,
					info: JSON.parse(JSON.stringify(row))
				};
			},
            handleSecret(index, row) {
                this.secretDialog = {
                	title: '修改密码',
                	visible: true,
                	option: 1,
                	rowIndex: index,
                	info: {userId: row.userId}
                };
            }
		},
		mounted() {
			//默认加载数据
			this.handleSearch('searchForm');

			this.$nextTick(function() {
				let maxheight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
				this.tableHeight = maxheight>300? maxheight: 300;
			});
		},
		components:{
			InfoEditForm, SecretForm
		}
	}
</script>
<style scoped>
	.el-table >>> .el-image {
		height: 2rem;
		line-height: 2rem;
		margin-bottom: -10px;
		color: #999;
	}
	.el-table >>> .el-image__error, .el-table >>> .el-image__inner {
		width: auto;
	}
</style>
